<template>
  <nav class="nav">
    <ul class="center-container">
      <li v-for="item in listData" :key="item.cat_name" class="list-item1">
        <span v-if="item.subList" class="list-item-content">{{
          item.cat_name
        }}</span>
        <a
          v-else-if="item.cat_name == '数字化校园'"
          target="_blank"
          class="list-item-content"
          href="http://www.gfcedu.com:9098/login.portal"
          >{{ item.cat_name }}</a
        >
        <router-link
          v-else-if="item.cat_name == '学院新闻'"
          :to="
            getListUrl(
              {},
              { t_cat_plant_pk: 405, plant_name: '学院新闻', t_plant_pk: 1 }
            )
          "
          class="list-item-content"
          >{{ item.cat_name }}</router-link
        >
        <router-link v-else :to="getUrl(item)" class="list-item-content">{{
          item.cat_name
        }}</router-link>
        <ul v-if="item.subList" class="level2-box">
          <li v-for="item2 in item.subList" :key="item2.cat_name">
            <router-link :to="getUrl(item2)" class="list-item-content">{{
              item2.cat_name
            }}</router-link>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          cat_name: "首页",
          t_cat_pk: 5,
        },
        {
          cat_name: "学院概况",
          t_cat_pk: 26,
          subList: [
            { cat_name: "学院概况"},
            { cat_name: "学院简介"},
            { cat_name: "现任领导"},
            { cat_name: "办学理念"},
            { cat_name: "标识校训"},
            { cat_name: "盛华校歌"},
            { cat_name: "组织结构"},
            { cat_name: "校长寄语"},
            { cat_name: "校园环境"},
          ],
        },
        {
          cat_name: "学院新闻"
        },
        {
          cat_name: "组织机构",
          subList: [
            { cat_name: "二级学院", t_cat_pk: 2 },
            { cat_name: "党群部门", t_cat_pk: 3 },
            { cat_name: "行政部门", t_cat_pk: 4 },
          ],
        },
        {
          cat_name: "招生就业",
          subList: [
            { cat_name: "招生信息", t_cat_pk: 29 },
            { cat_name: "就业信息", t_cat_pk: 30 },
          ],
        },
        { cat_name: "党建工作", t_cat_pk: 12 },
        { cat_name: "校园活动", t_cat_pk: 25 },
        { cat_name: "志愿者文化", t_cat_pk: 33 },
        { cat_name: "数字化校园", t_cat_pk: "" },
      ],
    };
  },
  methods: {
    getUrl({ cat_name, t_cat_pk }) {
      // if (t_cat_pk == ?)
      if (cat_name == "首页") {
        return `/`;
      } else if (cat_name == "党建工作") {
        cat_name = "党政办公室";
      } else if (cat_name == "校园活动") {
        cat_name = "学生处";
      } else if (
        cat_name == "二级学院" ||
        cat_name == "党群部门" ||
        cat_name == "行政部门"
      ) {
        return `/nav/${cat_name}/${t_cat_pk}`;
      }
      return `/second/${cat_name}/${t_cat_pk}`;
    },
  },
};
</script>

<style scoped>
.nav {
  background-color: var(--base-color);
}

.center-container {
  display: flex;
  justify-content: space-between;
}

.list-item1 {
  position: relative;
}

.list-item-content {
  display: inline-block;
  width: 100px;
  line-height: 50px;
  font-weight: 700;
  text-align: center;
  background-color: var(--base-color);
  color: #fff;
  cursor: pointer;
  transition: all 0.5s;
}

.list-item-content:hover {
  background-color: #dcedff;
  color: var(--base-color);
}

.level2-box {
  position: absolute;
  left: 0px;
  top: 50px;
  z-index: 99;
  display: none;
}

.list-item1:hover > .level2-box {
  display: block;
}
</style>